<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas绘制图片</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css"/>
</head>
     <canvas width="800" height="600"></canvas>
     <div class='pin'></div> 
	 <div class='pulse'></div>
     <script>
          var myCanvas = document.querySelector('canvas');
          var ctx = myCanvas.getContext('2d');
          
          var image = new Image(); //创建image对象
          
          //必须通过图片加载完毕，绑定加载完成事件
          image.onload = function(){
          //这里一定可以拿到
              //实现图片绘制
              console.log(image)
              //绘制图片的三种方式
              //1
              // ctx.drawImage(image,100,100);//图片对象，绘制在画布上面的坐标x,y
              //2
              // ctx.drawImage(image,100,100,100,100)  //加上缩放
              //3 参数：图片上定位的坐标；在图片上截取多大的区域；绘制在画布上面的坐标；图片的大小
              // ctx.drawImage(image,400,400,400,400,200,200,200,200)
              var imageWidth = image.width;//获取当前图片的尺寸
              var imageHeight = image.height;
              var personWidth = imageWidth/4; //小人的宽高
              var personHeight = imageHeight/4;
              //帧动画，在固定的时间间隔更新显示的图片，根据图片的索引
              var index = 0;
              //绘制在画布的正中心
              //图片绘制的起始点
              var x0 =ctx.canvas.width/2 - personWidth/2;  //小人的起始位置
              var y0 = ctx.canvas.height/2 - personHeight/2;
              ctx.drawImage(image,0,0,personWidth,personWidth,x0,y0,personWidth,personWidth);
              setInterval(function(){
                  index++;
                  ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
                  ctx.drawImage(image,index*personWidth,0,personWidth,personWidth,x0+index,y0,personWidth,personWidth);
                   if(index>=3){
                       index =0;
                   }
              },300);
          }
          //设置图片路径
          image.src='../img/ex.jpg'

     </script>
</body>
</html>